<template>
	<div class="app-logs" >
		<!-- 日志 -->
		
		<span class="loading grey" v-if="loading">
			<i class="iconfont icon-loading"></i> 加载中
		</span>
		
		
		<el-scrollbar :id="logId" >
			<template
				v-for="page in logDatas"
				>
				<p
			  	v-for="log in page"
					:key="log.index"
			  	>
			  	{{log}}
			  </p>
			</template>
		  <p class="has-nomore" v-if="hasNoMore">
				没有更多日志了
			</p>
		</el-scrollbar>
		
	</div>
</template>

<script>
//	import {getDataByUrl} from "@/service/components/common.js";
	let $ = require("jQuery");
	
	export default {
		props : [
			"options"
		],
		data(){
			return {
				logDatas : {
					0 : ["无"]
				},
				logId : "pageLog" + parseInt(Math.random()*100000),
				loading:false,
				hasNoMore:false,
				scroll : {
					
				},
				
				page : {
					pageNum : 1,
					pageSize: 100,
					total : 0,
				},
				
				statusStatic : true ,
			}
		},
		mounted(){
			this.getConfig();
			if(this.options&&this.options.autoGetData){
				this.initData();
			}
			this.initLog();
		},
		methods : {
		
			initData(_params,bl){
				let params = {
					...this.options.params,
					...(_params||{}),
					pageNum : this.page.pageNum,
					pageSize : this.page.pageSize,
				}
				if(this.options&&this.options.serviceFN){
					this.loading = true;
					this.options.serviceFN(params).then(ret=>{
						this.loading = false;
						if(!ret.code&&ret.data){
							let data = ret.data.data;
//							ret.data.data.forEach(el=>{
//								data.push(JSON.parse(el))
//							})
							this.logDatas[this.page.pageNum-1] = data;
							// page
							if(ret.data&&ret.data.totalNum){
								this.page.total = ret.data.totalNum;
							}
							// status online log 
							if(bl){
								console.log(5656,this.statusStatic)
								// 来自状态的添加
								// 满一页
								if(ret.data.data.length==this.page.pageSize){
									this.page.pageNum++
								}
								setTimeout(()=>{
									this.animateScrollBottom()
								},200)
							}
						}
					})
				}
			},
			initPage(){
        this.page = {
					pageNum : 1,
					pageSize: 100,
					total : 0
				}
			},
			addMore(){
				if(this.loading||!this.statusStatic){
					// loading 和状态不稳定时，不以滚动进行  addmore
					return ;
				}
				if(this.page.pageNum*this.page.pageSize >this.page.total){
					// 这里去除scroll 监听
					this.hasNoMore = true ;
					return ;
				}
				this.page.pageNum ++ ;
				this.initData();
			},
			
			initLog(){
				const vm = this;
				$("#" + this.logId + " .el-scrollbar__wrap").on("scroll",(e)=>{
					this.getConfig();
					if(this.scrollConfig.top>=this.scrollConfig.height){
						vm.addMore()
					}
				})
			},
			
			getConfig(){
				let $obj = $("#" + this.logId + " .el-scrollbar__wrap");
				this.scrollConfig = {
					height : $obj.find(".el-scrollbar__view").height(),
					top : $obj.scrollTop() + $obj.height() ,
				} 
			},
			
			animateScrollBottom(){
				this.getConfig();
				$("#" + this.logId + " .el-scrollbar__wrap").animate({scrollTop : this.scrollConfig.height },2000);
			},
			
			
			setStatusStatic(b){
				if(b){
					this.startInterVal();
				}
				this.statusStatic = b;
				this.initData({},true);
			},
			startInterVal(){
				let num = 10 ;
				this.intelVal = setInterval(()=>{
					if(num<=0){
						this.clearInterVal();
					}else{
						if(this.loading){
							return ;
						}
						num--;
						this.statusStaticLastPost = true ;
						this.initData({},true);
					}
				},600)
			},
			clearInterVal(){
				clearInterval(this.intelVal)
			}
			
			
		}
	}
	
</script>

<style lang="scss">
@import "../../../styles/variables.scss";

.app-logs {
	position:relative;
	background : #000;
	font-size: $fontSmall;
	color:#fff;
	padding:10px;
	
	.el-scrollbar {
		.el-scrollbar__wrap {
			padding-bottom:17px;
			height:100%;
			min-height:200px;
			max-height:500px;
			
		}
	}
	
	p {
		word-break: break-all;
	}
	.loading {
		position: absolute;
		left: 50%;
		bottom: 5px;
		color: #fff;
		transform: translate(-50%,0);
		line-height: 14px;
		vertical-align: top;
		
		&.grey {
			opacity: .3;
		}
	}
	.has-nomore {
		margin-bottom: -20px;
		text-align: center;
		opacity: .3;
		color: #fff;
	}
	.el-loading-mask {
		background: none !important;
	}
	
}
</style>